@import "common";
@import "reset";
#banner{
    height:500px;
    width:100%;
    background:#ccc;
    position:relative;
    text-align:center;
    #pic{
        float:left;
        width:100%;
        height:100%;
        position:relative;
        overflow:hidden;
        z-index:5;
        #left{
            height:100px;
            width:40px;
            position:absolute;
            top:200px;
            left:0;
            background:url(../img/slider-btn.png) no-repeat;
            z-index:10;
            opacity:0;
            filter: alpha(opacity = 0);
        }
        #right{
            height:100px;
            width:40px;
            position:absolute;
            top:200px;
            right:0;
            background:url(../img/slider-btn.png) no-repeat -50px 0;
            z-index:10;
            opacity:0;
            filter: alpha(opacity = 0);
        }
        li{
            height:500px;
            width:100%;
            position:absolute;
            top:0px;
            left:0;
            transform: scale(1.1);
            div{
                height:100%;
                width:100%;
                background-position:center!important;
            }
        }
    }
    #dot{
        position:absolute;
        height:12px;
        width:110px;
        bottom:12px;
        left:calc(50% - 55px);
        z-index:10;
        li{
            float:left;
            height:12px;
            width:12px;
            margin:0 5px;
            background:#b5b2a8;
            border-radius: 6px;
        }
    }
}
#banner .banner1{
    background: url(../img/banner1.jpg) no-repeat;
}
#banner .banner2{
    background: url(../img/banner2.jpg) no-repeat;
}
#banner .banner3{
    background: url(../img/banner3.jpg) no-repeat;
}
#banner .banner4{
    background: url(../img/banner4.jpg) no-repeat;
}
#banner .banner5{
    background: url(../img/banner5.jpg) no-repeat;
}
#banner #nav{
    width:1200px;
    height:500px;
    margin:0 auto;
    position:relative;
    #list{
        height:38px;
        width:180px;
        background:#008842;
        color:#fff;
        text-align:center;
        line-height:38px;
        font-size:14px;
        font-weight:600;
        position:absolute;
        z-index:7;
        .hide{
            display:none;
        }
        #list1{
            height:100%;
            width:100%;
            font-size:15px;
            display:inline-block;
            i{
                display:inline-block;
                height:0;
                width:0;
                border-top:10px solid #fff;
                border-left:5px solid transparent;
                border-right:6px solid transparent;
                border-bottom:none;
                margin-left:2px;
            }
        }
        ul{
            width:180px;
            background:rgba(255,255,255,0.95);
            position:absolute;  
            left:0;
            top:38px;
            li{
                height:42px;
                span{
                    display:inline-block;
                    height:35px;
                    width:46px;
                    float:left;
                    background:url(../img/floor_guide.png) no-repeat;
                }
                p{
                    display:inline-block;
                }
                a{
                    float:left;
                    display:inline-block;
                    padding:3px 0 0 7px;
                    color:#000;
                    font-weight:100;
                    font-family:"微软雅黑";
                    position:relative;
                    b{
                        height:40px;
                        width:26px;
                        text-align:left;
                        background:#fff;
                        position:absolute;
                        left:153px;
                        top:0;
                        z-index:20;
                        display:none;
                    }
                }
                div{
                    height:490px;
                    width:180px;
                    border:1px solid #bbb;
                    position:absolute;
                    left:179px;
                    top:-38px;
                    padding:8px 55px 0 20px;
                    background:rgba(255,255,255,0.95);
                    display:none;
                    text-align: left;
                    h3{
                        font-size:18px;
                        line-height:44px;
                        width:180px;
                        a{
                            font-size:18px;
                            line-height:44px;
                            color:#008842;
                            text-decoration:underline;
                            padding:0;
                            margin:0;
                        }
                    }
                    a{
                        float:none;
                        margin-right:32px;
                        padding:0;
                        line-height:24px;
                        font-size:12px;
                    }
                    a:hover{
                        color:#008842;
                    }
                    img{
                        position:absolute;
                        top:268px;
                        left:20px;
                    }
                }  
            }
            li:hover{
                height:40px;
                border:1px solid #bbb;
                border-right:none;
                background:#fff;
                a{
                    padding-top:2px;
                }
                b{
                    display:block;
                }
                div{
                    display:block;
                }
            }
            li:nth-of-type(2) span{
                background-position:-40px 0;
            }
            li:nth-of-type(3) span{
                background-position:-80px 0;
            }
            li:nth-of-type(4) span{
                background-position:-120px 0;
            }
            li:nth-of-type(5) span{
                background-position:-440px 0;
            }
            li:nth-of-type(6) span{
                background-position:-200px 0;
            }
             li:nth-of-type(7) span{
                background-position:-240px 0;
            }
             li:nth-of-type(8) span{
                background-position:-280px 0;
            }
             li:nth-of-type(9) span{
                background-position:-320px 0;
            }
             li:nth-of-type(10) span{
                background-position:-360px 0;
            } 
            li:nth-of-type(11) span{
                background-position:-400px 0;
            }
             li:nth-of-type(12) span{
                background-position:-160px 0;
            }
        }
    }
}
#guide{
    position:fixed;
    left:0;
    top:200px;
    width:30px;
    height:400px;
    color:#fff;
    line-height:20px;
    display:none;
    li{
        height:40px;
        width:30px;
        span{
            font-size:12px;
            height:100%;
            width:100%;
            background:#008842;
            float:left;
            display:none;
        }
        i{
            height:100%;
            width:100%;
            float:left;
            background:url(../img/floor_guide.png) no-repeat;
        }
        .active{
            display:block;
        }
        .hide{
            display:none;
        }
    }
    .show{
        span{
            display:block;
        }
        i{
            display:none;
        } 
    }
    li:nth-of-type(1) i{
        background-position:-6px 0;
    }
    li:nth-of-type(2) i{
        background-position:-45px 0;
    }
    li:nth-of-type(3) i{
        background-position:-246px 0;
    }
    li:nth-of-type(4) i{
        background-position:-166px 0;
    }
    li:nth-of-type(5) i{
        background-position:-85px 0;
    }
    li:nth-of-type(6) i{
        background-position:-125px 0;
    }
    li:nth-of-type(7) i{
        background-position:-325px 0;
    }
    li:nth-of-type(8) i{
        background-position:-205px 0;
    }
    li:nth-of-type(9) i{
        background-position:-365px 0;
    }
    li:nth-of-type(10) i{
        background-position:-445px 0;
    }
}
#contentbox{
    background:#f7f8f8;
    #content{
        width:1200px;
        margin:0 auto;
        padding:38px 0 50px 0;
        .styleone,.styletwo,.stylethree{
            width:1200px;
            height:518px;
            h2{
                height:37px;
                width:1200px;
                float:left;
                padding-top:18px;
                a{
                    float:left;
                    font-size:18px;
                    line-height:42px;
                    color:#fd603c;
                    font-weight:700;
                    span{
                        float:left;
                        font-size:14px;
                        line-height:1em;
                        color:#fff;
                        display:inline-block;
                        height:19px;
                        width:39px;
                        padding:13px 0 0 7px;
                        margin-right:10px;
                        background:url(../img/floor_tit_icon.png) no-repeat; 
                    }
                }
                i{
                    display:inline-block;
                    float:right;
                    padding-top:10px;
                    a{
                        font-weight:100;
                        color:#000;
                        font-size:12px;
                        line-height:1em;
                        padding:0 7px;
                        border-right:1px solid #884e88;
                    }
                    a:last-of-type{
                        padding-right:0;
                        border:none;
                    }
                    a:hover{
                        text-decoration: underline;
                    }
                }
            }
            p{
                height:463px;
                width:275px;
                float:left;
                background:#fff;
            }
            ul{
                height:461px;
                width:923px;
                float:left;
                border:1px solid #d5d5d5;
                background:#fff;
                li{
                    overflow: hidden;
                    img{
                        position:relative;
                    }
                }
            }
        }
        .styleone ul{
            li{
                float:left;
                border-right:1px solid #d5d5d5;
            }
            li:nth-of-type(1),li:nth-of-type(2),li:nth-of-type(5),li:nth-of-type(6){
                height:230px;
                width:230px;
            }
            li:nth-of-type(3),li:nth-of-type(4){
                height:230px;
                width:461px;
            }
            li:nth-of-type(1),li:nth-of-type(2),li:nth-of-type(3){
                border-bottom:1px solid #d5d5d5;
            }
            li:nth-of-type(3),li:nth-of-type(6){
                border-right:none;
            }
        }
        .styletwo ul{
            li{
                float:left;
                border-right:1px solid #d5d5d5;
            }
            li:nth-of-type(1){
                height:383px;
                width:234px;
                border-bottom:1px solid #d5d5d5;
            }
            li:nth-of-type(2),li:nth-of-type(3),li:nth-of-type(5),li:nth-of-type(6){
                height:191px;
                width:220px;
                border-bottom:1px solid #d5d5d5;
            }
            li:nth-of-type(4){
                float:right;
                height:461px;
                width:246px;
                border-right:none;
            }
            li:nth-of-type(7){
                height:66px;
                width:651px;
            }
        }
        .stylethree ul{
            li{
                float:left;
                border-right:1px solid #d5d5d5;
            }
            li:nth-of-type(1){
                height:383px;
                width:234px;
                border-bottom:1px solid #d5d5d5;
            }
            li:nth-of-type(2),li:nth-of-type(4){
                height:191px;
                width:441px;
                border-bottom:1px solid #d5d5d5;
            }
            li:nth-of-type(3){
                float:right;
                height:461px;
                width:246px;
                border-right:none;
            }
            li:nth-of-type(5){
                height:66px;
                width:651px;
            }
        }
        .styletwo,.stylethree{
            ul li:last-child{
                padding:11px 0 0 25px;
                img{
                    float:left;
                    margin-right:28px;
                }
            }
        }
        div:nth-of-type(2){
            h2 > a{
                color:#007f4d;
                span{
                    background-position:-46px 0;
                }
            }
        }
        div:nth-of-type(3){
            h2 > a{
                color:#ffcc00;
                span{
                    background-position:-92px 0;
                }
            }
        }
        div:nth-of-type(4){
            h2 > a{
                color:#e08683;
                span{
                    background-position:-138px 0;
                }
            }
        }
        div:nth-of-type(5){
            h2 > a{
                color:#45c6ce;
                span{
                    background-position:-184px 0;
                }
            }
        }
        div:nth-of-type(6){
            h2 > a{
                color:#764e00;
                span{
                    background-position:-230px 0;
                }
            }
        }
        div:nth-of-type(7){
            h2 > a{
                color:#c5cc46;
                span{
                    background-position:-276px 0;
                }
            }
        }
        div:nth-of-type(8){
            h2 > a{
                color:#3ca3dc;
                span{
                    background-position:-322px 0;
                }
            }
        }
        div:nth-of-type(9){
            h2 > a{
                color:#b84f00;
                span{
                    background-position:-368px 0;
                }
            }
        }
        div:nth-of-type(10){
            h2 > a{
                color:#940505;
                span{
                    background-position:-414px 0;
                }
            }
        }
    }
}
